<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>班级管理 - 学生教师管理系统</title>
    <!-- 外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind 配置 -->

</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <div id="classesSection">
        <div class="bg-white/80 rounded-lg shadow-lg overflow-hidden mb-8">
            <div class="bg-info p-4">
                <h2 class="text-white text-xl font-bold flex items-center">
                    <i class="fa fa-building mr-2"></i> 班级列表
                    <button class="ml-auto bg-white/80 text-info px-4 py-1 rounded-md text-sm font-medium hover:bg-gray-100 transition-colors"
                            id="addClassBtn">
                        <i class="fa fa-plus mr-1"></i> 添加班级
                    </button>
                </h2>
            </div>
            <div class="p-4">
                <div class="flex justify-between mb-4">
                    <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                <i class="fa fa-search"></i>
                            </span>
                        <input class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200" id="classSearch" placeholder="搜索班级..."
                               type="text">
                    </div>
                    <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-1 rounded-md text-sm font-medium transition-colors"
                            id="refreshClasses">
                        <i class="fa fa-refresh mr-1"></i> 刷新
                    </button>
                </div>
                <div class="overflow-x-auto" id="classesTable">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                班级 ID
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                班级名称
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                班主任
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                班级人数
                            </th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
                                scope="col">
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody class="bg-white/80 divide-y divide-gray-200" id="classesBody">
                        <tr class="text-center">
                            <td class="px-6 py-12 text-gray-500" colspan="5">
                                <i class="fa fa-spinner fa-spin text-2xl mb-2"></i>
                                <p>加载中...</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 班级管理模态框 -->
<!-- 添加班级模态框 -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="addClassModal">
    <div class="bg-white/80 rounded-lg shadow-xl w-full max-w-md transform transition-all">
        <div class="bg-info p-4 rounded-t-lg">
            <h3 class="text-white text-lg font-bold flex items-center">
                <i class="fa fa-plus mr-2"></i> 添加班级
                <button class="ml-auto text-white hover:text-gray-200" id="closeClassModal">
                    <i class="fa fa-times"></i>
                </button>
            </h3>
        </div>
        <div class="p-6">
            <form id="addClassForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="classId">班级 ID(必填)<span
                            class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200" id="classId"
                           required
                           type="text">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="className">班级名称<span
                            class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200" id="className"
                           required
                           type="text">
                </div>
                <!-- 统一格式的班主任输入区域 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="headTeacher">班主任（选填）</label>
                    <div class="relative">
                        <!-- 与班级ID统一的输入框样式 -->
                        <input
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200"
                                id="headTeacher"
                                type="text"
                                placeholder="输入教师姓名或ID搜索..."
                        >
                        <!-- 下拉选项框 -->
                        <div id="teacherDropdown" class="hidden absolute z-10 left-0 right-0 mt-1 bg-white shadow-lg rounded-md max-h-60 overflow-y-auto">
                            <!-- 选项通过JS动态生成 -->
                        </div>
                        <!-- 隐藏的input存储选中的教师ID -->
                        <input type="hidden" id="headTeacherId">
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="classNumber">班级人数（选填）</label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200" id="classNumber"
                           type="number">
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors" id="cancelAddClass"
                            type="button">
                        取消
                    </button>
                    <button class="px-4 py-2 bg-info text-white rounded-md hover:bg-info/90 transition-colors"
                            type="submit">保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑班级模态框 -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="editClassModal">
    <div class="bg-white/80 rounded-lg shadow-xl w-full max-w-md transform transition-all">
        <div class="bg-info p-4 rounded-t-lg">
            <h3 class="text-white text-lg font-bold flex items-center">
                <i class="fa fa-pencil mr-2"></i> 编辑班级
                <button class="ml-auto text-white hover:text-gray-200" id="closeEditClassModal">
                    <i class="fa fa-times"></i>
                </button>
            </h3>
        </div>
        <div class="p-6">
            <form id="editClassForm">
                <!-- 显示班级ID，设置为只读 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editClassIdDisplay">班级 ID(不可修改)<span class="text-red-500">！</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm bg-gray-100" id="editClassIdDisplay"
                           readonly
                           type="text">
                    <!-- 隐藏的ID字段，用于提交 -->
                    <input id="editClassId" type="hidden">
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editClassName">班级名称<span
                            class="text-red-500">*</span></label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200" id="editClassName"
                           required
                           type="text">
                </div>
                <!-- 统一格式的编辑页班主任输入区域 -->
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="editHeadTeacher">班主任</label>
                    <div class="relative">
                        <!-- 与班级ID统一的输入框样式 -->
                        <input
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200"
                                id="editHeadTeacher"
                                type="text"
                                placeholder="输入教师姓名或ID搜索..."
                        >
                        <!-- 下拉选项框 -->
                        <div id="editTeacherDropdown" class="hidden absolute z-10 left-0 right-0 mt-1 bg-white shadow-lg rounded-md max-h-60 overflow-y-auto"></div>
                        <!-- 隐藏字段（存储选中的教师ID） -->
                        <input type="hidden" id="editHeadTeacherId">
                    </div>
                    <!-- 提示元素 -->
                    <p id="editHeadTeacherTip" class="hidden text-sm mt-1 text-red-500"></p>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1"
                           for="editClassNumber">班级人数（选填）</label>
                    <input class="block w-full rounded-md border-gray-300 shadow-sm focus:border-info focus:ring focus:ring-info/30 transition duration-200" id="editClassNumber"
                           type="number">
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors" id="cancelEditClass"
                            type="button">
                        取消
                    </button>
                    <button class="px-4 py-2 bg-info text-white rounded-md hover:bg-info/90 transition-colors"
                            type="submit">保存
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 引入css -->
<link href="../css/style.css" rel="stylesheet">
<!-- 引入JS -->
<script src="../js/index.js"></script>
<script src="../js/class.js"></script>
<script src="../js/style.js"></script>
</body>
</html>